<template>
  <div>
    <div v-show="open == false" style="position: absolute;z-index: 9999;left: 20px;top: 350px;cursor: pointer;">
      <img @click="closeList(open)" src="../../../../static/img/openOrClose2.png">
    </div>
    <div v-show="open == true" style="position: absolute;z-index: 9999;left: 330px;top: 350px;cursor: pointer;transform: rotate(180deg)">
      <img @click="closeList(open)" src="../../../../static/img/openOrClose2.png">
    </div>
    <div v-show="open == true">
      <el-menu active-text-color="#4187e7" @select="handleSelect" unique-opened :default-openeds="sendId">

        <div class="list-title">
          <span class="topic">专题</span>
          <i class="reset" @click="reset">重置</i>
        </div>
        <div class="maplist">

          <el-submenu
              class="list-title"
              v-for="(item, i) in title"
              :index="item.id"
              :key="item.id"
          >
            <template slot="title">
              <span>{{ item.name}}  ({{item.checkListGroup.length}}/{{item.catalogueVos.length}})</span>
            </template>

            <el-submenu
                class="sub-two"
                v-for="text in item.catalogueVos"
                :key="text.id"
                :index="text.id"
            >
              <template slot="title">
            <span>
              <el-checkbox-group v-model="item.checkListGroup" @change="natureChange">
                <el-checkbox :label="text">
                  <el-tooltip placement="right" effect="light">
                    <div slot="content">{{text.name}} &nbsp;{{ (text.dataGenerationTime).split(",")[(text.dataGenerationTime).split(",").length - 1] }}</div>
                    <span>
                      {{ text.name }}
                    </span>
                  </el-tooltip>
                </el-checkbox>
              </el-checkbox-group>
            </span>
              </template>

              <el-menu-item
                  v-for="(nat, j) in text.nature"
                  :key="nat.index"
                  :index="item.index + '-' + text.index + '-' + nat.index"
                  :style="{'--fill-color': (j % 8 == 0) ? '#fd0000': (j % 8 == 1) ? '#0069ff': (j % 8 == 2) ? '#ffca00' : (j % 8 == 3) ? '#18ff00' :
               (j % 8 == 4) ? '#844690': (j % 8 == 5) ? '#f9fd03': (j % 8 == 6) ? '#de6969': '#f200ff'}"
              >
                <el-checkbox-group v-model="text.naturekList" @change="attributeChange" :max="8">
                  <el-checkbox :label = nat.label>
                    {{ nat.label }}
                  </el-checkbox>
                </el-checkbox-group>
              </el-menu-item>
            </el-submenu>

          </el-submenu>

        </div>
      </el-menu>
    </div>
  </div>
</template>


<script>
import {catalogueService, catalogueByParentIdService, selectCatalogueById, getFeatureByJson} from "@/api/electronic-map/electronic-map-service";

export default {

  data() {
    return {

      sendId: [],

      checkListGroup: {

      },

      open: true,

      year: 0,

      tableData4: [],
      defaultProps: {
        label: "name",
        children: "catalogueVos"
      },

      checkList: [],
      naturekList: [],

      title: [],
      data: [],
      nature: [],
      oldLayers: null,
    };
  },
  props: ['getAttribute', 'resetNew'],
  mounted() {
    this.getCatalogue();
  },
  methods: {

    //获取传过来的菜单id
    getChage(id){

      if (id == 0){
        //调用获取目录接口
        this.sendId = [];
        this.getCatalogue();
      }else {
        //根据id选中这个图层
        this.title.forEach(e => {
          for (let catalogueVo of e.catalogueVos) {
            if (catalogueVo.id == id){
              //根据parentId打开菜单
              this.sendId.push(catalogueVo.parentId);
              e.checkListGroup.push(catalogueVo);
              //调用图层显示
              this.natureChange();
            }
          }
        })
      }

    },

    //关闭list菜单
    closeList(open) {
      this.open = !open;
    },

    //获取选中图层
    natureChange() {

      this.title.forEach(e => {
        if (e.catalogueVos && e.catalogueVos.length > 0) {
          e.catalogueVos.forEach(e2 => {
            e2.naturekList = [];
          })
        }
      })

      // 当前选中图层
      let selLayers = [];
      this.title.forEach(e => {
        if (e.checkListGroup && e.checkListGroup.length > 0) {
          e.checkListGroup.forEach(v => {
            selLayers.push(v)
          })
        }
      })

      let layerNames = [];
      let layerIds = [];
      if (selLayers.length > 0) {
        //清除一下上次选中的属性
        //this.$emit('clear-tuceng', []);
        selLayers.forEach(e => {
          //传递选中图层 所有数据
          this.$emit('tuceng-data-all', e);
          this.oldLayers = e;
          //获取最新年份数据
          let time = e.dataGenerationTime;
          let timeList = time.split(",");
          if (timeList.length > 1) {
            this.year = Number(timeList[timeList.length - 1]);
          }
          //传递图层名称
          //this.$emit('set-tuceng', e.dataName);
          layerNames.push(e.dataName);
          layerIds.push(e.id);

          // 字段
          let polymerization = e.isPolymerization
          // 获取json
          let res = {
            "result": [
              {
                "layerName": "市级年度决算_2021",
                "layerType": "Point",
                "featureCollection": [
                  {
                    "一般公共预算收入": "254670",
                    "一般公共预算总收入": "54444",
                    "一般公共预算支出": "450263",
                    "一般公共预算总支出": "54444",
                    "geom": "POINT (118.6980702 39.739032)",
                    "乡镇": "海港区"
                  }
                ]
              }
            ]
          }
          var resultData = res.result[0];
          //把图层类型传递给父组件
          this.$emit('set-tuceng-type', resultData.layerType)
          //把属性数据传递给父组件
          this.getAttribute(resultData.featureCollection);

          let naList = [];
          for (let featureCollectionElementKey in resultData.featureCollection[0]) {
            if("geom" === featureCollectionElementKey || "the_geom" === featureCollectionElementKey || "村庄" === featureCollectionElementKey || "乡镇" === featureCollectionElementKey){

            }else {
              var na = {
                index: featureCollectionElementKey,
                label: featureCollectionElementKey
              };
              naList.push(na);
            }
          }
          e.nature = naList;
          //传递属性列表
          this.$emit('set-nature', naList)
        })
      }
      this.$emit('nature-change', layerNames, this.oldLayers, layerIds);
    },

    //获取选中属性
    attributeChange() {
      //获取选中图层 循环颜色
      let naturekList = []
      this.title.forEach(e => {
        if (e.catalogueVos && e.catalogueVos.length > 0) {
          e.catalogueVos.forEach(e2 => {
            if (e2.naturekList && e2.naturekList.length > 0) {
              e2.naturekList.forEach(e => {
                naturekList.push(e);
              })
            }
          })
        }
      })
      this.$emit('attribute-change', naturekList);

    },


    /**
     * el树 节点点击事件
     */
    nodeClick(data) {
      if (data.catalogueVos == undefined) {

      }
    },

    /**
     *{ 获取目录接口 }
     */
    getCatalogue1() {
      catalogueService().then(res => {
        if (res.code == 200) {
          res.data.map(v => {
            v.checkListGroup = []
            if (v.catalogueVos) {
              v.catalogueVos.map(v2 => {
                v2.nature = []
                v2.naturekList = []
                return v2;
              })
            }
            return v;
          })
          this.title = res.data;

          for (let i = 0; i < this.title.length; i++) {
            this.$nextTick(() => {
              this.$set(this.checkListGroup, "checkListGroup" + i, []); // 将moneyNum转换为Number类型
            });
          }

        }
      })
    },
    getCatalogue() {
      let res = {
        "code": 200,
        "status": true,
        "msg": "操作成功",
        "data": [
          {
            "id": "12811111111",
            "parentId": "0",
            "userId": "1550311059965067265",
            "name": "大数据中心",
            "dataType": "",
            "isPolymerization": "",
            "iconName": "",
            "dataGenerationTime": "",
            "decide": "1",
            "catalogueVos": [
              {
                "id": "3452452345",
                "parentId": "12811111111",
                "userId": "1550311059965067265",
                "name": "视频高点",
                "dataName": "视频高点",
                "dataType": "3-2",
                "isPolymerization": "*",
                "iconName": "小图标",
                "dataGenerationTime": "2019",
                "decide": "1"
              }
            ]
          },
          {
            "id": "12311111111",
            "parentId": "0",
            "userId": "1550311059965067265",
            "name": "自然资源和规划局",
            "dataType": "",
            "isPolymerization": "",
            "iconName": "",
            "dataGenerationTime": "",
            "decide": "1",
            "catalogueVos": [
              {
                "id": "34325435",
                "parentId": "12311111111",
                "userId": "1550311059965067265",
                "name": "兴趣点",
                "dataName": "兴趣点",
                "dataType": "3-2",
                "isPolymerization": "*",
                "iconName": "小图标",
                "dataGenerationTime": "2019",
                "decide": "1"
              },
              {
                "id": "1580474743188402188",
                "parentId": "12311111111",
                "userId": "1550311059965067265",
                "name": "影像",
                "dataName": "img_cache_fengfeng",
                "dataType": "1-2",
                "isPolymerization": "*",
                "iconName": "小图标",
                "dataGenerationTime": "20190901,20220718,20220801",
                "decide": "1"
              }
            ]
          },
          {
            "id": "241411111111",
            "parentId": "0",
            "userId": "1550311059965067265",
            "name": "住建局",
            "dataType": "",
            "isPolymerization": "",
            "iconName": "",
            "dataGenerationTime": "",
            "decide": "1",
            "catalogueVos": [
              {
                "id": "23234124121",
                "parentId": "241411111111",
                "userId": "1550311059965067265",
                "name": "高点监控覆盖范围",
                "dataName": "高点",
                "dataType": "3-2",
                "isPolymerization": "*",
                "iconName": "小图标",
                "dataGenerationTime": "2019",
                "decide": "1"
              }
            ]
          },
          {
            "id": "241511111111",
              "parentId": "0",
              "userId": "1550311059965067265",
              "name": "交通运输局",
              "dataType": "",
              "isPolymerization": "",
              "iconName": "",
              "dataGenerationTime": "",
              "decide": "1",
              "catalogueVos": [
                {
                  "id": "45643563465",
                  "parentId": "12311111111",
                  "userId": "1550311059965067265",
                  "name": "交通",
                  "dataName": "TrafficMap",
                  "dataType": "1-2",
                  "isPolymerization": "*",
                  "iconName": "小图标",
                  "dataGenerationTime": "2019",
                  "decide": "1"
                },
          ]
          },
          {
            "id": "324211111111",
            "parentId": "0",
            "userId": "1550311059965067265",
            "name": "统计局",
            "dataType": "",
            "isPolymerization": "",
            "iconName": "",
            "dataGenerationTime": "",
            "decide": "1",
            "catalogueVos": [
              {
                "id": "5183533938749704872",
                "parentId": "324211111111",
                "userId": "1550311059965067265",
                "name": "市级年度决算",
                "dataName": "市级年度决算_",
                "dataType": "3-2",
                "isPolymerization": "一般公共预算收入,一般公共预算总收入,一般公共预算支出,一般公共预算总支出",
                "iconName": "小图标",
                "dataGenerationTime": "2019,2020,2021",
                "decide": "1"
              }
            ]
          },
        ]
      }
      if (res.code == 200) {
        res.data.map(v => {
          v.checkListGroup = []
          if (v.catalogueVos) {
            v.catalogueVos.map(v2 => {
              v2.nature = []
              v2.naturekList = []
              return v2;
            })
          }
          return v;
        })
        this.title = res.data;

        for (let i = 0; i < this.title.length; i++) {
          this.$nextTick(() => {
            this.$set(this.checkListGroup, "checkListGroup" + i, []); // 将moneyNum转换为Number类型
          });
        }

      }
    },

    handleNodeClick(node, data) {
      this.$router.push({
        path: "ThematicMap",
        query: {
          key: data.checkedNodes,
        },
      });
    },
    //获取图层属性方法
    showTask(e) {
    },
    reset() {
      //alert("重置");

      //重置菜单
      //重置按钮点击传过去
      this.resetNew();
      //清空菜单选项
      this.getCatalogue();

      /*Object.assign(this.$data, this.$options.data());
      this.$options.data();
      this.$data = this.$options.data();*/
    },
    handleSelect(keypath){
    },
    two(e, d) {
      //根据父id获取目录下的图层
      if (d.length == 1) {
        catalogueByParentIdService(e).then(res => {
          var resData = res.data;
          var dataData = [];
          for (let resDatum of resData) {
            var data1 = {
              index: resDatum.id,
              label: resDatum.name,
            }
            dataData.push(data1);
          }
          this.data = dataData;
        })
      }
    },
  },
};
</script>

<style>
.maplist::-webkit-scrollbar {
  width: 0 !important
}
</style>

<style lang="scss" scoped>

//.el-checkbox__label{
//  width: 200px;
//  overflow: hidden;
//  white-space: nowrap;
//  text-overflow: ellipsis;
//}

::v-deep .el-checkbox__label{
  width: 180px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

::v-deep .el-submenu__title {
  text-align: left;
}

::v-deep .el-checkbox {
  .el-checkbox__input.is-checked+.el-checkbox__label { //设置获取属性选中颜色
    color: var(--fill-color);
  }

  /*.el-checkbox__input.is-checked .el-checkbox__inner,
  .el-checkbox__input.is-indeterminate .el-checkbox__inner {
    background-color: var(--fill-color);
    border-color: var(--fill-color);
  }

  .el-checkbox__input.is-focus .el-checkbox__inner,
  .el-checkbox__inner:hover {
    border-color: var(--fill-color);
  }*/
}

.el-menu--inline {
  height: 100%;
}

.maplist {
  height: 700px;
  overflow-y: auto;
}
.el-menu {
  width: 300px;
  height: 760px;
  overflow: hidden;
  border-right: 0;
  border-radius: 5px;
  box-shadow: 1px 1px 5px 0px;
  padding: 0 10px;
  position: absolute;
  top: 5px;
  left: 10px;
  z-index: 9999;
  .el-submenu {
    border: 1px solid #eee;
    margin-top: 2px;
    padding: 0;
  }
  ::v-deep .el-submenu.is-opened .el-submenu__title {
    color: #3f88e7;
    background-color: #f8f2f2;
  }
  ::v-deep.el-tree-node__label {
    color: #111;
  }
}
.list-title {
  padding: 10px 0;
  .sub-two {
    border: 0;
    margin: 0;
    padding: 0;

    ::v-deep.el-submenu__title {
      height: 40px;
      line-height: 40px;
    }
    .el-menu-item {
      height: 30px;
      line-height: 30px;
    }
  }
  .topic {
    font-weight: 400;
    font-size: 17px;
    margin-left: 10px;
  }
  .reset {
    height: 100%;
    float: right;
    margin-top: 15px;
    margin-right: 5px;
    color: #3f88e7;
    font-size: 13px;
    cursor: pointer;
  }
}
</style>
